import React, { useEffect, useMemo, useState } from 'react'
import { NavBar, Toast } from '@nutui/nutui-react'
import { Share, More, Cart, ArrowLeft, SortV } from '@nutui/icons-react'
import { SearchBar, ConfigProvider, Ellipsis } from '@nutui/nutui-react';
import "../css/sou.scss"
import { useNavigate, useSearchParams } from 'react-router-dom';
import axios from 'axios';
// 导入商品模板
import GoodItem from './GoodItem';
export default function Sou() {
    // 路由传参，传递要搜索的商品名称，暂时使用查询传参
    // let goodsname=useSearchParams().get("goodsname")
    // 暂时使用海虾来模糊搜索
    let goodsname = "番茄"
    // 设置默认数组
    let [moarr, setMoarr] = useState([])
    //设置默认价格排序方式为false
    let [price, setPrice] = useState(false)
    // 搜索的数组来接收
    let [searchgoods, setSearchgoods] = useState([])
    // 在页面挂载完成之后进行搜索
    useEffect(() => {
        axios.get("http://localhost:3000/limengxi/searchgoods", {
            params: {
                goodsname
            }
        }).then((res) => {
            let { data } = res.data
            // console.log(data);
            setMoarr(data)
            setSearchgoods(data)
        })
        console.log("挂载完成");
    }, [])
    let nav = useNavigate()
    // 头部tab进行路由跳转，跳到路由搜索页面，暂时使用cate页面代替-----------------------------
    let To = () => {
        nav("/cate")
    }
    // 设置默认的类别为默认
    let [sort, setSort] = useState("默认")
    // 更改类别名称
    let changesort = (e) => {
        console.log(e.target.innerText);
        if (e.target.innerText == "默认") {
            setSort("默认")
        } else if (e.target.innerText == "销量") {
            setSort("销量")
        } else if (e.target.innerText == "价格") {
            setSort("价格")
        }
    }
    // 设置计算属性
    useMemo(() => {
        // 设置默认的类别为默认
        // setSort("默认")
        console.log("计算属性");
        // console.log(searchgoods);
        if (sort === "默认") {
            // 默认排序
            setSearchgoods(moarr)
            console.log(moarr, "moren");
        } else if (sort === "销量") {
            // 销量排序
            let arr = [...searchgoods]
            arr.sort((a, b) => {
                return a.salesnum - b.salesnum
            })
            setSearchgoods(arr)
            console.log(arr, "销量");
        }
    }, [sort])
    let jia = () => {
        setPrice(!price)
        let arr = [...searchgoods]
        if (price) {
            let sortprices = arr.sort((a, b) => {
                return a.price - b.price
            })
            // console.log(searchgoods);
            setSearchgoods(sortprices)
            console.log(sortprices, "价格1");
        } else {
            let sortpricej = arr.sort((a, b) => {
                return b.price - a.price
            })
            // console.log(searchgoods);
            setSearchgoods(sortpricej)
        }
    }
    let addshopcar = (item) => {
        // console.log(item);
        // 获取当前商品的id
        let id = item._id
        // item.buyNum += 1
        // 将商品添加到后端购物车数据库中
        // -----------------------------------------------------------------------------------------待办，将id传到后端，判断是否存在该商品，然后进行加一
        // 从购物车数组中找到这个商品，并更新购买数量
        let newarrr = [...searchgoods]
        // 从当前数组中找到这个商品，并更新购买数量
        let changeid=newarrr.findIndex((item) => {
            return item._id === id
        })
        newarrr[changeid] = item
        setSearchgoods(newarrr)
    }
    return (
        // 搜索结果页面
        <div className='search_box'>
            {/* 顶部导航栏 */}
            <NavBar
                style={{
                    height: "50px",
                    backgroundColor: "#ffffff",
                    fontSize: "20px",
                    margin: "0px"
                }}
                back={<ArrowLeft />}
                onBackClick={() => { To() }}
            >
                <span>搜索结果</span>
            </NavBar>
            {/* input框 */}
            <div className='cate_search'>
                <ConfigProvider
                    theme={{
                        nutuiSearchbarBackground: 'white',
                        nutuiSearchbarContentBackground: 'rgb(242, 242, 242)',
                    }}
                >
                    <SearchBar shape="round" maxLength={15} placeholder="小米" />
                </ConfigProvider>
            </div>
            {/* 排序框 */}
            <div
                className='cate_sort'
                onClick={(e) => { changesort(e) }}
            >
                <span className={sort === "默认" ? "spancolor" : ""}>默认</span>
                <span className={sort === "销量" ? "spancolor" : ""}>销量</span>
                <span className={sort === "价格" ? "spancolor" : ""}
                    onClick={() => { jia() }}
                >价格<SortV /></span>
            </div>
            {/* 商品框 */}
            <div className='sou_box'>
                {searchgoods.map((item) => (
                     <GoodItem obj={item} addshopcar={addshopcar}  key={item._id} ></GoodItem>
                ))}
            </div>
        </div>
    )
}
